<template>
  <div class="container">
    <div class="game-wrap">

      <!-- 顶部栏 -->
      <div class="top-wrap"> 
        <div class="score-wrap">
            <strong style="line-height:20px;">score</strong>
            <span style="color:#eeeeee;font-weight:600;font-size:26px">{{score}}</span>
        </div>
        <div class="user-wrap">
            <div style="margin-right:20px">
              <open-data type="userNickName" ></open-data>
            </div>
            <div class="avatar">
              <open-data type="userAvatarUrl"></open-data>
            </div>
        </div>
      </div>

      <!-- 道具栏 -->
      <div class="property-wrap">
        <div style="display:inline-block;">道具:</div>
        <div class="toback property-button" style="display:inline-block">
          <div class="toback-botton" @click="backState" v-if="historyList.length !=0">后退</div>
          <div class="toback-botton disabled" v-else>后退</div>
        </div>
      </div>

      <!-- 游戏框 -->
      <div class="middle" @touchstart='touchstart' @touchend='touchend' @touchmove='throttle'>
        <div class="little-line" v-for="(lineitem,ind) in list" :key="ind">
          <block-item v-for="(item,indd) in lineitem" :value='item' :key='indd'></block-item>
        </div>
      </div>

      <div class="bottom">
        <div>
          2048游戏说明:
        </div>
        <p>
          1.上下左右滑动,所有方块会按滑动方向平移
        </p>
          2.数字相同的方块碰撞在一起,值会相加
        <p>
          3.合成更大的数字,挑战2018
        </p>
          <!-- <button v-if="buttonVisible" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfoClick">获取权限</button> -->
          <!-- <button @click='getUserInfoState'>查看授权状态</button> -->
      </div>
    </div>
  </div>
</template>

<script>
import blockItem from '@/components/blockItem'
import {touch, rotateList, login, createBlock} from '@/mixins'
import {throttle} from '@/utils'
export default {
  components: {
    blockItem
  },
  mixins: [touch, rotateList, login, createBlock],
  data () {
    return {
      throttle: throttle(this.touchmove, 100),
      buttonVisible: true,
      score: 0,
      list: [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
      ],
      actionList: [],
      historyList: [],
      historySocre: [0]
    }
  },
  created () {
    this.createRandomBlock(this.list)
    this.createRandomBlock(this.list)
  },
  mounted () {

  },
  methods: {
    /**
     该方法用来判断有没有相同项
     依次向右遍历:
        0跳过本次循环
        有值则判断值是否相等, 如果相等,就把两个值相加,
     * */
    computedValue (arr, index) {
      for (let i = index + 1; i < 4; i++) {
        if (!arr[i]) {
        } else {
          if (arr[i] === arr[index]) {
            arr[index] += arr[i]
            this.score += arr[index]
            arr[i] = 0
            return !1
          } else {
            return !1
          }
        }
      }
    },

    /**
     * 该方法计算当前元素向左移动的距离
     *   当前元素没有值 无需移动
     *      循环右边的元素 碰到 0 把当前值给 0 继续循环
     *      碰到 非0 return
     */
    computedDistance (arr, index) {
      let valueIndex = index
      if (arr[index] === 0) {
        return !1
      } else {
        for (let i = index - 1; i >= 0; i--) {
          if (arr[i]) {
            return !1
          } else {
            arr[i] = arr[valueIndex]
            arr[valueIndex] = 0
            valueIndex = i
          }
        }
      }
    },
    /**
     * 完成一行的移动
     */
    processCell (rotateArr, index) {
      const arr = rotateArr[index]
      for (let i = 0; i < arr.length; i++) {
        this.computedValue(arr, i)
      }
      for (let i = 1; i < arr.length; i++) {
        this.computedDistance(arr, i)
      }
      return arr
    },

    /**
     * 完成整个list移动
     */
    processAll (rotateArr) {
      for (var i = 0; i < rotateArr.length; i++) {
        rotateArr[i] = this.processCell(rotateArr, i)
      }
      return rotateArr
    },
    move (arrow) {
      this.actionList = JSON.parse(JSON.stringify(this.list))

      const up = () => {
        return this.clockwiseList(this.processAll(this.anticlockwiseList(this.actionList)))
      }
      const down = () => {
        return this.anticlockwiseList(this.processAll(this.clockwiseList(this.actionList)))
      }
      const left = () => {
        return this.processAll(this.actionList)
      }
      const right = () => {
        return this.reverseList(this.processAll(this.reverseList(this.actionList)))
      }
      const sports = {
        1: up,
        2: right,
        3: down,
        4: left
      }
      const afterSportsList = sports[arrow]()

      this.comparison(afterSportsList, this.list)
        .then(res => {
          if (!res) {
            this.savePrevList()
            this.saveSocre()
            this.createRandomBlock(afterSportsList)
            this.list = afterSportsList
          }
        })
    },
    /**
     * 比对两个数组变化
     *    相同 return
     *    不同 向下进行
     */
    comparison (newArr, oldArr) {
      const newArrString = newArr.toString()
      const oldArrString = oldArr.toString()
      return new Promise((resolve, reject) => {
        if (newArrString === oldArrString) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
    },
    /**
     * 保存移动前的分数
     */
    saveSocre () {
      const _historySocre = this.historySocre

      _historySocre.push(this.score)
      if (_historySocre.length > 4) {
        _historySocre.shift()
      }
    },
    /**
     * 保存移动前的list
     */
    savePrevList () {
      const _historyList = this.historyList
      _historyList.push(this.list)
      if (_historyList.length > 3) {
        _historyList.shift()
      }
    },
    /**
     * 返回到上一个状态
     * */
    backState () {
      const _historySocre = this.historySocre
      const _historyList = this.historyList
      const prevList = _historyList.pop()

      _historySocre.pop()
      const prevSocre = _historySocre[_historySocre.length - 1]
      this.list = prevList
      this.score = prevSocre
    }

  }
}
</script>

<style>
/* 
主体背景 #EEE9BF
文字背景 #CDC9A5
 */
html{
  height: 100%;
}
body{
  height: 100%;
  color:#7a702C;
}
.top-wrap{
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
}
.score-wrap{
  float: left;
  height:54px;
  width: 100px;
  text-align: center;
  border-radius: 4px;
  background: #CDC9A5;
}
.user-wrap{
  float: right;
  height: 54px;
  display:flex;
  justify-content: end;
  align-items: center;
  padding: 0 10px;
  border-radius: 4px;
  background: #CDC9A5;
}
.user-wrap .avatar{
  width:44px;
  height:44px;
  border-radius: 6px;
  overflow: hidden;
}
.property-wrap{
  margin: 25px 0;
}
.container{
  width: 100%;
  background: #EEE9BF;
}
.game-wrap{
  margin: 0 auto;
  width: 300px;
  height: 100%;
}
.middle{
  border-radius: 8px;
  background:  #CDC9A5;
  border: 3px solid #CDC9A5;
  padding-left:3px; 
  padding-right:3px; 
}
.little-line{
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.little-line:nth-of-type(4){
  margin-bottom: 8px;
}
.bottom{
  margin-top: 10px;
  font-size: .8em;
}
.property-button{
  margin-left: 10px;
}
.toback-botton{
  padding: 0 24px;
  color: #eeeeee;
  background: #3CB371;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
} 
.disabled{
  opacity: .6;
}
.key-wrap{
  display: flex;
  justify-content: center;
}
.simkey{
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
